<script setup lang="ts">
import Inject from '@/components/Inject.vue'
import { provide, readonly, ref } from 'vue'
import { messageKey, countKey, updateCountKey, userKey } from '@/config/injectKey'
const message = ref('Hello from parent')
const count = ref(0)
const user = ref({
  name: '张三',
  email: 'zhangsan@example.com',
})

provide(messageKey, message)
provide(countKey, count)
provide(updateCountKey, (newCount: number) => {
  count.value = newCount
})
provide(userKey, readonly(user)) // 标记只读数据
</script>

<template>
  <div class="provide">
    <h2>父组件</h2>
    <Inject />
  </div>
</template>

<style scoped lang="scss"></style>
